<template>
  <div>
    <div class="back">
      <span @click="back()"
        >返回{{ this.origin === 0 ? "核心团队>" : "更多人才>" }}</span
      >
    </div>
    <!-- 人才详情 -->
    <v-layout>
      <v-flex class="vflex" xs48>
        <v-card class="vcard"> </v-card>
      </v-flex>
    </v-layout>
    <div class="rowbox">
      <div class="info-box">
        <!-- 是否已离职 -->
        <!-- <p v-if="info['resign']" class="resign-box">离职</p> -->
        <div v-loading="loading" class="logo">
          <img
            v-if="info['avatar'] && info['avatar'] !== ''"
            :src="info['avatar']"
            alt=""
          />
          <img v-else src="../../img/default-user.png" alt="" />
        </div>
        <div class="box">
          <h4>
            {{ info.name
            }}<span
              class="tag"
              v-for="(item, index) in info.rank"
              :key="index"
              >{{ item.key }}</span
            >
          </h4>
          <!-- <button class="collect"><i class="el-icon-plus"></i><span>关注</span></button> -->
          <ul class="list clearfix">
            <li>
              <span class="tit w80">所属单位：</span
              >{{ info.info && info.info.an
              }}<span v-if="isSubMechanism">(子机构)</span>
            </li>
            <!-- <li><span class="tit">归属地：</span>{{info['address']}}</li> -->
            <li>
              <span class="tit w80">职务：</span
              >{{ info.jobs && info.jobs.join("、") }}
            </li>
            <li>
              <span class="tit w96">专利申请量：</span
              >{{ info.info && info.info.allCount }}
            </li>
          </ul>
          <ul class="list clearfix">
            <!-- <li><span class="tit w80">联系方式：</span>{{info['email'] || info['phone']}}</li> -->
            <li>
              <span class="tit w80">科研星级：</span>
              <el-rate
                v-model="star"
                :allow-half="true"
                disabled
                disabled-void-icon-class="el-icon-star-off"
                class="elrate"
              >
              </el-rate>
            </li>
          </ul>
          <ul class="list clearfix">
            <p class="abs">
              <span class="tit w80">个人简介：</span>
              <span
                v-if="info['bio'] && info['bio'] !== ''"
                v-html="info['bio']"
              ></span>
              <span v-else>{{ emptyText }}</span>
              <!-- <span v-html="info['bio']"></span> -->
            </p>
          </ul>
        </div>
      </div>
    </div>
    <div class="rowbox" style="">
      <div ref="bbox" style="width: 45%">
        <p>涉及技术领域</p>
        <ChartOne :info="info" />
      </div>
      <div style="width: 45%">
        <p>领域变化分析</p>
        <ChartTwo :info="info" :offsetHeight="offsetHeight" />
      </div>
    </div>

    <div class="rowbox" style="">
      <div style="width: 90%">
        <p>科研趋势</p>
        <Trend :info="info" />
      </div>
    </div>

    <div class="rowbox" style="">
      <div style="width: 90%">
        <p>人际关系图</p>
        <div class="chart-box">
            <ChartFour :info="info" />
          </div>
      </div>
    </div>
    <div class="rowbox" style="">
      <div style="width: 45%">
        <p>科研人才足迹圈</p>
        <ChartThree :info="info" />
      </div>
      <div style="width: 45%">
        <p>工作履历分析</p>
        <WorkExperience :info="info" />
      </div>
    </div>

    <div class="rowbox" style="">
      <div style="width: 90%">
        <p>研究成果</p>
        <ResearchResult :info="info" />
      </div>
    </div>
  </div>
</template>

<script>
import { numFormat } from "@/utils/utils";
import ChartOne from "./chart/ChartOne";
import ChartTwo from "./chart/ChartTwo";
import ChartThree from "./chart/ChartThree";
import ChartFour from "./chart/ChartFour";
import Trend from "./Trend";
import WorkExperience from "./WorkExperience";
import ResearchResult from "./ResearchResult";
import { nextTick } from 'vue';
export default {
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      info: {},
      origin: -1,
      loading: true,
      offsetHeight: 0,
      star: 0,
      emptyText: "数据加载中...",
      isSubMechanism: false, // 是否是子机构
    };
  },
  components: {
    ChartOne,
    ChartTwo,
    ChartThree,
    ChartFour,
    Trend,
    WorkExperience,
    ResearchResult,
  },
  methods: {
    // 获取人才信息
    getTalentsInfo() {
      this.loading = true;
      let p1 = new Promise((resolve, reject) => {
        this.$get(this.$Url.team.talentsList, {
          companyName: this.companyName,
          dataType: "patentPerson",
        })
          .then((res) => {
            let data = res.data || {};
            let patentPerson = data["patentPerson"] || {};
            if (patentPerson) {
              for (let i in patentPerson.all) {
                if (patentPerson.all[i].key === this.$route.query.key) {
                  resolve(patentPerson.all[i]);
                  break;
                }
              }
            }
          })
          .catch((err) => {});
      });

      let p2 = new Promise((resolve, reject) => {
        this.$get(this.$Url.team.talentsInfo, {
          pid: this.$route.query.key,
        })
          .then((res) => {
            let result = res.data && res.data.result && res.data.result[0];
            resolve(result);
          })
          .catch((err) => {});
      });

      Promise.all([p1, p2]).then((res) => {
        let info = { ...res[0], ...res[1] };
        // 判断是否是当前公司子机构
        if (info.info.an !== this.$cookie.get("companyName") && !info.resign) {
          this.isSubMechanism = true;
        }
        // 科研星级
        this.getTalentsScore(info);
        // 如果talentsInfo中个人简介为空，则请求talentsResume获取自定义的简介模板
        if (!info["bio"] || info["bio"] === "") {
          this.getTalentsResume(info, (re) => {
            this.$set(info, "bio", re.data);
            this.info = info;
            // 获取图表高度
            setTimeout(() => {
              this.offsetHeight = this.$refs.bbox.offsetHeight;
            }, 400)
            this.loading = false;
          });
        } else {
          this.info = info;
          // 获取图表高度
          setTimeout(() => {
            this.offsetHeight = this.$refs.bbox.offsetHeight;
          }, 400)
          this.loading = false;
        }
      });
    },
    // 获取科研星级
    getTalentsScore(info) {
      this.$get(this.$Url.team.talentsScore, {
        id: info.key,
      })
        .then((res) => {
          let data = res.data;
          if (data) {
            this.star = (data / 100) * 5;
          }
        })
        .catch((err) => {});
    },
    // 获取个人简介
    getTalentsResume(info, fn) {
      this.$get(this.$Url.team.talentsResume, {
        companyName: this.companyName,
        workName: info.info.an,
        id: info.key,
        name: info.name,
      }).then((res) => {
        fn && fn(res);
      });
    },
    back() {
      let name = "";
      if (Number(this.origin) === 0) {
        name = "coreTeam";
      } else if (Number(this.origin) === 1) {
        name = "moreTalent";
      }
      this.$router.push({
        name,
      });
    },
  },
  beforeMount() {
    this.origin = this.$route.query.origin || 0;
  },
  mounted() {
    this.getTalentsInfo();
  },
};
</script>

<style lang="scss">
.back {
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  text-align: right;
  span {
    font-size: 14px;
    cursor: pointer;
  }
}
.vflex {
  margin-bottom: 20px;
  
}
.w70 {
  width: 70px !important;
}
.w80 {
  width: 80px !important;
}
.w96 {
  width: 96px !important;
}
.elrate {
  display: inline-block;
  margin-left: -3px;
  vertical-align: unset;
}
.right {
  margin-right: 30px !important;
}
.chart-box {
  padding: 0 40px;
}
</style>
<style lang="scss">
.rowbox {
  width: 90%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin: 30px;
  padding: 20px;

  .info-box {
    position: relative;
    width: 100%;
    padding: 30px;
    overflow: hidden;
    .resign-box {
      position: absolute;
      top: 8px;
      right: -27px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      background-color: #deb887;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    .logo {
      position: absolute;
      top: 30px;
      left: 30px;
      width: 138px;
      height: 138px;
      border: 1px solid #d9e0ee;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .box {
      position: relative;
      padding-left: calc(138px + 30px);
      h4 {
        position: relative;
        width: 100%;
        margin-bottom: 22px;
        font-size: 20px;
        color: #241c75;
        vertical-align: middle;
        .tag {
          display: inline-block;
          height: 24px;
          line-height: 24px;
          padding: 0 11px;
          border-radius: 12px;
          margin: 2px 5px;
          font-weight: normal;
          font-size: 12px;
          color: $mainColor;
          background-color: #e9e9fc;
          vertical-align: bottom;
          &:nth-child(1) {
            margin-left: 20px;
          }
        }
      }
      .collect {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 36px;
        border-radius: 6px;
        color: #6f6dd8;
        text-align: left;
        font-weight: bold;
        background-color: #e7e7fc;
        outline: none;
        i {
          display: inline-block;
          margin-left: 20px;
          margin-right: 14px;
          font-size: 16px !important;
          vertical-align: text-bottom;
        }
        span {
          display: inline-block;
          font-size: 14px;
          vertical-align: middle;
        }
      }
      .list {
        display: block;
        padding-left: 0;
        margin-bottom: 10px;
        list-style: none;
        li {
          display: block;
          float: left;
          width: 33.33%;
          font-size: 14px;
          color: #7674a3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(1) {
            width: 46%;
          }
          &:nth-child(2) {
            width: 27%;
          }
          &:nth-child(3) {
            width: 27%;
          }
          .tit {
            display: inline-block;
            width: 60px;
            color: #241c75;
          }
        }
        .abs {
          width: 100%;
          font-size: 14px;
          color: #7674a3;
          .tit {
            display: inline-block;
            width: 60px;
            color: #241c75;
          }
        }
      }
    }
  }
}
</style>
<style>
.el-loading-mask {
  z-index: 3;
}
</style>
